<template>
  <el-form ref="formRef" :model="form" :rules="rules" class="m7-form" label-position="top">
    <el-form-item prop="blackContent" style="width: 700px; position: unset">
      <span slot="label">拉黑提示语
        <el-tooltip content="访客被拉黑后给访客推送的提示语" placement="top">
          <i style="font-size:12px;color:#B3B9C7;padding-right:6px;cursor:pointer" class="V7_iconfont V7_iconV7tubiao_bangzhu-42"></i>
        </el-tooltip>
      </span>
      <el-input type="textarea" :rows="2" v-model.trim="form.blackContent" maxlength="100" show-word-limit></el-input>
    </el-form-item>
    <el-form-item prop="deblockKey" style="width: 700px">
      <span slot="label">解封触发词
        <el-tooltip content="访客可以通过发送触发词申请解封" placement="top">
          <i style="font-size:12px;color:#B3B9C7;padding-right:6px;cursor:pointer" class="V7_iconfont V7_iconV7tubiao_bangzhu-42"></i>
        </el-tooltip>
      </span>
      <el-input v-model.trim="form.deblockKey" maxlength="20" show-word-limit></el-input>
    </el-form-item>
    <el-form-item prop="deblockContent" style="width: 700px">
      <span slot="label">解封提示语
        <el-tooltip content="访客申请解封后推送的提示语" placement="top">
          <i style="font-size:12px;color:#B3B9C7;padding-right:6px;cursor:pointer" class="V7_iconfont V7_iconV7tubiao_bangzhu-42"></i>
        </el-tooltip>
      </span>
      <el-input type="textarea" :rows="2" v-model.trim="form.deblockContent" maxlength="100" show-word-limit></el-input>
    </el-form-item>
    <el-form-item style="text-align: right">
      <el-button type="primary" @click="onSubmit" size="mini">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
/**
 * 黑名单设置配置表单组件
 */
import { Component, Vue, Ref } from 'vue-property-decorator';
import { commonAction } from '@/utils/common'
@Component({
  name: 'BlackForm'
})
export default class BlackForm extends Vue {
  [x: string]: any
  @Ref() private readonly formRef: any
  private form: any = {
    blackContent: '', // 拉黑提示语
    deblockKey: '', // 解封触发词
    deblockContent: '' // 解封提示语
  }

  // 获取黑名单配置
  private async getConfig () {
    const params = { url: '/im-center/action/blacklist/queryConfig', method: 'POST', data: { account: this.$store.state.common.session.account._id } }
    const result: any = await commonAction(params)
    if (result.success) {
      const { data } = result
      this.form = { ...data }
    }
  }

  private mounted () {
    this.getConfig()
  }

  private rules: any = {
    blackContent: [{ required: true, trigger: 'blur', message: '请填写拉黑提示语' }],
    deblockKey: [{ required: true, trigger: 'blur', message: '请填写解封触发词' }],
    deblockContent: [{ required: true, trigger: 'blur', message: '请填写解封提示语' }]
  }

  private onSubmit () {
    this.formRef.validate(async valid => {
      if (valid) {
        const params = { url: '/im-center/action/blacklist/updateConfig', method: 'POST', data: this.form }
        const result: any = await commonAction(params)
        if (result.success) {
          this.$message.success('保存成功')
        }
      }
    })
  }
}
</script>
